<template>
  <el-container class="fulled-h">
    <!-- 顶部 -->
    <Header>
      <div slot="right" class="d-flex al-center">
        <el-button class="d-flex jc-center">预览</el-button>
        <el-button class="btn-export-image" @click="dialogType = 'exportPageImages'">
          <div class="d-flex jc-center"><i class="icon icon-upload mr-4"></i>图片导出</div>
        </el-button>
        <el-button id="btn-saveAndPreview" class="btn-preview mr-8" type="primary" @click="handleOnSave">
          <div class="d-flex jc-center"><i class="icon icon-save mr-4"></i>保存</div>
        </el-button>
      </div>
    </Header>
    <!-- 编辑器 -->
    <el-container class="container-body fulled-h">
      <AsidePanel ref="AsidePanel"></AsidePanel>
      <el-main class="d-flex jc-between p-0">
        <PreviewPanel
          ref="preview-panel"
          :page-config="pageConfig"
          :apply-config="applyConfig"
          :widget-config.sync="widgetConfig"
          class="flex-1"
        ></PreviewPanel>
        <SettingPanel ref="settingPanel" :page-config="pageConfig" :apply-config="applyConfig"></SettingPanel>
      </el-main>
    </el-container>

    <!-- 图片导出弹窗 -->
    <ExportPageImageDialog
      :dialog-type.sync="dialogType"
      :app-name="applyConfig.appName"
      :page-config-list="landingPageRecord.pageConfigList"
      :widget-config-list="landingPageRecord.widgetConfigList"
    />
  </el-container>
</template>

<script>
  import { isNotEmpty, parseTime, getDay, generateID, decodePageStyle } from '@/utils';
  import { mapGetters, mapMutations, mapActions } from 'vuex';
  import Header from '@/layout/Header';
  import AsidePanel from './components/landingPageEditor/AsidePanel';
  import PreviewPanel from './components/landingPageEditor/previewPanel';
  import SettingPanel from './components/landingPageEditor/SettingPanel';
  import ExportPageImageDialog from './components/ExportPageImageDialog';

  export default {
    components: {
      Header,
      AsidePanel,
      PreviewPanel,
      SettingPanel,
      ExportPageImageDialog
    },

    computed: {
      ...mapGetters(['draftData']),
      ...mapGetters('component', ['componentData', 'previewer', 'scaleRatio']),
      isFromDraft() {
        return isNotEmpty(this.fromDraft); // 草稿箱进入
      },
      isCreate() {
        return !isNotEmpty(this.templateId) && !isNotEmpty(this.workId); // 空白创建
      },
      isCopyWork() {
        return isNotEmpty(this.copyWorkId); // 复制作品
      },
      isEditWork() {
        return isNotEmpty(this.workId); // 编辑作品
      },
      isEditTemplate() {
        return isNotEmpty(this.templateId) && !isNotEmpty(this.workId); // 模板创建
      },
      applyConfig() {
        return this.landingPageRecord.applyConfig;
      },
      pageConfig() {
        return this.landingPageRecord.pageConfigList[this.activePageIndex];
      },
      widgetConfig: {
        set(componentData) {
          this.landingPageRecord.widgetConfigList.splice(this.activePageIndex, 1, componentData);
        },
        get() {
          return this.landingPageRecord.widgetConfigList[this.activePageIndex];
        }
      }
    },
    data() {
      return {
        // 当前编辑页面索引
        activePageIndex: 0,
        // 默认空白模板配置
        landingPageRecord: {
          applyConfig: {
            appName: '未命名',
            appDesc: '请填写描述',
            shareTitle: '请填写标题',
            shareDesc: '请填写描述',
            channelCodes: [],
            startDateTime: `${parseTime(new Date(), 'YYYY-MM-DD HH:mm:ss')}`,
            endDateTime: `${getDay(90)} 12:00:00`,
            shareCover: '/admin/images/marketing/landingPage/default-share.jpg'
          },
          pageConfigList: [this.generatePageConfig()],
          widgetConfigList: [[]]
        },
        dialogType: ''
      };
    },
    provide() {
      return {
        getWorkStatus: () => this.workStatus,
        getSceneChannelList: () => this.sceneChannelList,
        getActivePageIndex: () => this.activePageIndex,
        setActivePageIndex: (index) => {
          this.activePageIndex = index;
        },
        getPageConfigList: () => this.landingPageRecord.pageConfigList,
        getWidgetConfigList: () => this.landingPageRecord.widgetConfigList,
        generatePageConfig: this.generatePageConfig,
        isH5: true
      };
    },
    created() {
      const savePageConfig = JSON.parse(localStorage.getItem('pageConfig')) || [];
      const saveWidgetConfig = JSON.parse(localStorage.getItem('widgetConfig')) || [];
      this.landingPageRecord.pageConfigList = [...this.landingPageRecord.pageConfigList, ...savePageConfig];
      this.landingPageRecord.widgetConfigList = [...this.landingPageRecord.widgetConfigList, ...saveWidgetConfig];
    },
    methods: {
      parseTime,
      ...mapMutations('component', [
        'SET_COMPONENTDATA',
        'RESET_COMPONENTDATA',
        'SET_SNAPSHOTDATA',
        'SET_PREVIEWER',
        'DEPRESS_COMPONENT',
        'RECORD_SNAPSHOT',
        'SET_SCALERATIO'
      ]),
      ...mapActions(['EMPTY_DRAFT']),
      // 保存
      handleOnSave() {
        localStorage.setItem('pageConfig', JSON.stringify(this.landingPageRecord.pageConfigList));
        localStorage.setItem('widgetConfig', JSON.stringify(this.landingPageRecord.widgetConfigList));
        this.$message.success('保存成功');
      },
      // 新增页面
      generatePageConfig() {
        return {
          name: '未命名1',
          id: generateID(),
          size: { width: 750, height: 1600 },
          pageTurn: { turnable: false },
          pageStyle: decodePageStyle({ fillType: 0, backgroundColor: '' }),
          snapshotData: { index: -1, data: [] }
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }

  // 头部
  .el-header {
    .btn-export-image {
      .icon-upload {
        width: 14px;
        height: 14px;
        @include bg('icons/icon-upload.png');
      }
    }

    .btn-preview {
      margin-left: 30px;

      .icon-save {
        width: 14px;
        height: 14px;
        @include bg('icons/icon-save-theme.png');
      }
    }

    .btn-save {
      margin: 0 16px;
      width: 80px;
    }

    .btn-exit {
      padding: 9px 0;
      width: 90px;
      color: map-get($colors, 'grey');
      background-color: map-get($bgColors, 'lightgrey');

      .icon-exit {
        width: 14px;
        height: 14px;
        @include bg('icons/icon-arrow-left-grey.png');
      }
    }
  }

  .container-body {
    padding-top: 64px;
  }
</style>
